<script setup>
const tableData = [
  {
    name: 'Tom',
    age: 18,
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    name: 'lisi',
    age: 18,
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    name: 'zangsna',
    age: 20,
    address: 'No. 189, Grove St, Los Angeles',
  },

]
const handleEdit = (index, row) => {
  console.log(index, row)
}
const handleDelete = (index, row) => {
  console.log(index, row.name)
}
import { ref } from 'vue'
const currentPage2 = ref(5)
const pageSize2 = ref(100)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}


</script>

<template>
  <el-table :data="tableData" style="width: 100%" stripe >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="age" label="年龄" width="180" sortable  />
    <el-table-column prop="address" label="地址" width="180" show-overflow-tooltip/>
    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          Edit
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      v-model:current-page="currentPage2"
      v-model:page-size="pageSize2"
      :page-sizes="[100, 200, 300, 400]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout=" prev, pager, next,sizes"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 20px;display: flex;justify-content: end"
  />
</template>

<style scoped>

</style>